<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.5.4 (463801)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2017-10-24 01:43:19 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2021-09-24 03:37:04 +0000"/><title>DAY27：闭包和继承</title></head><body><div><span style="font-size: 18px;">1.什么是闭包？</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    闭包的概念：闭包就是作用域嵌套时，</span><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">让局部变量进化成自由变量的<span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-weight: bold;">环境</span></span></span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">，是一种让</span><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">局部变量进化</span></span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">的方式</span></div><div><br/></div><div style="font-size: 12px;"><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">              定义在一个函数内部的函数</span></div></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    垃圾回收机制：用过一次的东西，先放在一个内存中，不立即删掉，可以随时进行还原或再次使用，直到没有任何作用的时候再清除</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    如家用电器，电脑回收站</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span></div></div><div><br/></div><div><span style="font-size: 18px;">2.闭包的应用场景</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">一、for循环之中：</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    for循环之中的i变量会因为for的循环次数被覆盖，所以在for循环内部存在函数时，而且这个函数内会调用i变量，这种情况下就需要用到闭包。</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">for</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">var</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">i</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-weight: normal;">0</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">; i</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">&lt;</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-weight: normal;">10</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">; i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">++</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">) {</span></div><div style="font-size: 12px;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-weight: normal;">        console</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.log(i);        <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(165, 178, 185); font-family: Monaco; font-style: normal; font-weight: normal;">//可以访问到每次的i</span></span></font></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    }</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    必须满足两个条件：</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        1.在for循环内存在函数</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        2.函数内会调用这个变量</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">ali</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">document</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.getElementsByTagName(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"li"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">);</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    for</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">var</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-weight: normal;">0</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">;i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">&lt;</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-weight: normal;">10</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">;i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">++</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">){</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">        ali[i].</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco;">onclick</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">()</span><span style="background-color: rgb(251, 250, 248); font-size: 12px; color: rgb(6, 6, 6); font-family: Monaco;">{</span></div><div style="font-size: 12px;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-weight: normal;">            console</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.log(i);        <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(165, 178, 185); font-family: Monaco; font-style: normal; font-weight: normal;">//在函数内部就无法访问到外部变量</span></span></font></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    如何形成闭包</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">ali</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(74, 138, 1); font-family: Monaco;">document</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.getElementsByTagName(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"li"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">);</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    for</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">var</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-weight: normal;">0</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">;i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">&lt;</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(173, 66, 239); font-family: Monaco; font-style: normal; font-weight: normal;">10</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">;i</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">++</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">){</span></div><div style="font-size: 12px;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        (</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(a){</span></font></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">            ali[a].</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco; font-style: normal; font-weight: normal;">onclick</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(){</span></div><div style="font-size: 12px;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-weight: normal;">                console</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.log(a);</span></font></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">            }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        })(i)</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    }</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    一旦</span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(255, 0, 0); font-family: Monaco;">内部函数</span></span><span style="background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">调用</span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(65, 173, 28); font-family: Monaco; font-weight: bold;">外部函数</span></span><span style="background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">的</span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(229, 0, 255); font-family: Monaco;">局部变量</span></span><span style="background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">，那么这个时候，这个</span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(229, 0, 255); font-family: Monaco;">局部变量</span></span><span style="background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">就会变成</span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(255, 0, 0); font-family: Monaco;">内部函数</span></span><span style="background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">的</span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(255, 175, 0); font-family: Monaco;">私有变量</span></span></span></div><div><br/></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">二、当需要给setTimeout的回调函数传参时：</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    setTimeout(</span><span style="color: rgb(0, 0, 255); font-family: Monaco;">function</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">(a){</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">        console.log(a);</span> <span style="color: rgb(0, 128, 0); font-family: Monaco;">//两秒后，undefined</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    },</span> <span style="color: rgb(9, 136, 90); font-family: Monaco;">2000</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">);</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    或</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    setTimeout(fn(</span><span style="color: rgb(9, 136, 90); font-family: Monaco;">10</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">),</span> <span style="color: rgb(9, 136, 90); font-family: Monaco;">2000</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">);</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    function</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">fn(a){</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">        console.log(a);</span> <span style="color: rgb(0, 128, 0); font-family: Monaco;">//没有延迟，直接打印10</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    }</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    </span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    使用闭包：</span></div><div><br/></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    function</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">fn(a){</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">        return</span> <span style="color: rgb(0, 0, 255); font-family: Monaco;">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">(){</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">            console.log(a);</span> <span style="color: rgb(0, 128, 0); font-family: Monaco;">//两秒后，10</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">        }</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    }</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    var</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">f</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">fn(</span><span style="color: rgb(9, 136, 90); font-family: Monaco;">10</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">);</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    setTimeout(f,</span> <span style="color: rgb(9, 136, 90); font-family: Monaco;">2000</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">);</span></div><div><br/></div></div><div><br/></div><div><span style="font-size: 18px;">3.闭包的特点</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">闭包是将函数内部和函数外部连接起来的桥梁</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    可以读取函数内部的变量</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    让这些变量的值，始终保存在内存中，不会在调用结束后被系统回收</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    避免全局变量命名空间的污染</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    内存消耗很大，不能滥用</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    闭包会在父函数外部，改变父函数内部变量的值</span></div><div><br/></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">1.掌握闭包的特点和原理</span></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">2.掌握闭包的应用场景</span></div><div><br/></div><div><span style="font-size: 18px; color: black; font-family: &quot;Helvetica Neue&quot;;">3.写出一个简单闭包，函数</span><span style="font-size: 18px; color: black; font-family: &quot;Helvetica Neue&quot;;">fn</span><span style="font-size: 18px; color: black; font-family: &quot;Helvetica Neue&quot;;">里有一个局部变量</span><span style="font-size: 18px; color: black; font-family: &quot;Helvetica Neue&quot;;">a,</span> <span style="font-size: 18px; color: black; font-family: &quot;Helvetica Neue&quot;;">在函数外（全局状态）能调到，并每次累加</span></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">1.构造函数继承</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    在构造函数中，同样属于两个新创建的函数，也是不相等的</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco;">Fn</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(181, 138, 0); font-family: Monaco;">name</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">        this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.name</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">name;</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">        this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">show</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">=</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">function</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(){</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">            alert(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">this</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">.name);</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">        }</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">obj1</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">= new</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">Fn(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"AAA"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">);</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    var</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">obj2</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco;">= new</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">Fn(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">"BBB"</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">);</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    obj1.show()</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">    obj2.show()</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    此时，任何一个new出来的实例上都有了show方法，可以视为最基础的继承。</span></div></div><div><br/></div><div><span style="font-size: 18px;">2.call／apply继承</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco;">    function</span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(228, 139, 0); font-family: Monaco;">Father</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(181, 138, 0); font-family: Monaco;">skill</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">){</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">        this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.skill</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">skill;</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">        this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco; font-style: normal; font-weight: normal;">show</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(){</span></div><div style="font-size: 12px;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">            alert(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-weight: normal;">"我会"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">+</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.skill);</span></font></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">    function</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco; font-style: normal; font-weight: normal;">Son</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(181, 138, 0); font-family: Monaco; font-style: normal; font-weight: normal;">abc</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">){</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(165, 178, 185); font-family: Monaco; font-style: normal; font-weight: normal;">        //这里的this指向函数Son的实例化对象</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(165, 178, 185); font-family: Monaco; font-style: normal; font-weight: normal;">        //将Father里面的this改变成指向Son的实例化对象，当相遇将father里面所有的属性和方法都复制到了son身上</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(165, 178, 185); font-family: Monaco; font-style: normal; font-weight: normal;">       </span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-style: normal; font-weight: normal;">//</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-style: normal; font-weight: normal;">Father.call(this,abc);</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-style: normal; font-weight: normal;">//继承结束，call适合固定参数的继承</span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(255, 38, 0); font-style: normal; font-weight: normal;">        //</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(255, 38, 0); font-style: normal; font-weight: normal;">Father.apply(this,arguments);</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(255, 38, 0); font-style: normal; font-weight: normal;">//继承结束，apply适合不定参数的继承</span></font></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    }</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">    var</span> <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">f</span><span style="font-size: 12px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;"> </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">= new</span> <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">Father(</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-weight: normal;">"绝世木匠</span><span style="background-color: rgb(251, 250, 248);"><span style="caret-color: rgb(40, 156, 151); background-color: rgb(251, 250, 248); color: rgb(40, 156, 151); font-family: Monaco;">”</span><span style="background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco;">);</span></span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">    var</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">s</span><span style="font-size: 12px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;"> </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">= new</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">Son(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-weight: normal;">"一般木匠"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">);</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    f.show()</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    s.show();</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    </span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    优点：</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">       </span><span style="font-size: 12px;" /><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">创建子类实例时，可以向父类的构造器传参</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">；</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        </span></div><div><span style="caret-color: rgb(6, 6, 6); color: rgb(6, 6, 6); font-family: Monaco;">    缺点：</span></div><div><span style="caret-color: rgb(6, 6, 6); color: rgb(6, 6, 6); font-family: Monaco;">        只能继承构造器中定义的属性和方法，不能继承原型上定义的属性和方法</span></div></div><div><br/></div><div><span style="font-size: 18px;">3.prototype的概念</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    原型对象</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    指针  constructor  表示当前函数属于谁，用来指向当前原型所属的函数</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    原型指针  [[prototype]]  </span></span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">__proto__  相当于一根原型指针，指向当前对象的“父级”</span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    可以在当前函数的原型身上添加各种属性和方法，以供使用</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    JS中万物皆对象，所有内容的指针终点都指向Object</span></span></div><div style="font-size: 12px;"><div><br/></div></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">4.原型链继承</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">方法一：</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(0, 0, 0); font-family: Monaco;">Son.prototype</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(0, 0, 255); font-family: Monaco;">new</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(0, 0, 0); font-family: Monaco;">Father();</span></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //创建一个函数Father，用来做原始对象</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    function</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Father(){</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">        this</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">.skill</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(163, 21, 21); font-family: Monaco;">"铁匠"</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    };</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    Father.prototype.show</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(0, 0, 255); font-family: Monaco;">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">(){</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">        console.log(</span><span style="color: rgb(0, 0, 255); font-family: Monaco;">this</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">.skill)</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    }</span></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //创建一个函数Son，准备继承Father的原型</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    function</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Son(){};</span></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //将Son点原型，赋值为一个指针，指向Father的原型</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    Son.prototype</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(0, 0, 255); font-family: Monaco;">new</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Father();</span></div><div><br style="font-family: Monaco; color: rgb(6, 6, 6);"/></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //此时就可以通过执行new Son()获取到从构造函数Father上继承过来属性和方法</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    var</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">s</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(0, 0, 255); font-family: Monaco;">new</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Son()</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    s.show();        <span style="color: rgb(0, 128, 0); font-family: Monaco;">//铁匠</span></span></div><div><br/></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-weight: normal;">    优点：</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        1.可以访问父类原型上的方法和属性</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        2.简单方便，易于实现</span></font></div><div><br/></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(6, 6, 6); font-style: normal; font-weight: normal;">    缺点：</span></font></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        1.创建子类实例时，无法向父类的构造器传参</span></font></div><div><br/></div><div><span style="caret-color: rgb(6, 6, 6); color: rgb(6, 6, 6); font-family: Monaco;">方法二：</span></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //创建一个函数Father，用来做原始对象</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    function</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Father(){</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">        this</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">.skill</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(163, 21, 21); font-family: Monaco;">"铁匠"</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">;</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    };</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    Father.prototype.show</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(0, 0, 255); font-family: Monaco;">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">(){</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">        console.log(</span><span style="color: rgb(163, 21, 21); font-family: Monaco;">"hello world"</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">)</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    }</span></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //创建一个函数Son，准备继承Father的原型</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    function</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Son(){};</span></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //将Son的原型，设置为Father的原型</span></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //Son.prototype = Father.prototype;</span></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //但是这种拷贝方式为对象的浅拷贝，一旦后期修改Son原型上的方法，会影响到Father的原型</span></div><div><span style="color: rgb(0, 128, 0); font-family: Monaco;">    //需采用对象的深拷贝方法</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    for</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">(</span><span style="color: rgb(0, 0, 255); font-family: Monaco;">var</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">i</span> <span style="color: rgb(0, 0, 255); font-family: Monaco;">in</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Father.prototype){</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">        Son.prototype[i]</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Father.prototype[i];</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    }</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    Son.prototype.show</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(0, 0, 255); font-family: Monaco;">function</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">(){</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">        console.log(</span><span style="color: rgb(163, 21, 21); font-family: Monaco;">"这是子类修改之后的show方法"</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">)</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    }</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    var</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">f</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(0, 0, 255); font-family: Monaco;">new</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Father()</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    f.show()</span></div><div><span style="color: rgb(0, 0, 255); font-family: Monaco;">    var</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">s</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">=</span> <span style="color: rgb(0, 0, 255); font-family: Monaco;">new</span> <span style="color: rgb(0, 0, 0); font-family: Monaco;">Son()</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    s.show();</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    </span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    优点：</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">        完全将父类原型上的方法和属性拷贝到子类原型</span></div><div><br/></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">    缺点：</span></div><div><span style="color: rgb(0, 0, 0); font-family: Monaco;">        只能继承原型上的方法和属性，构造函数无法传参和继承</span></div><div><br/></div></div><div><br/></div><div><span style="font-size: 18px;">5.混合继承</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="font-size: 12px;"><span style="font-size: 14px;"><span style="font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">    特点：</span></span></div><div style="font-size: 12px;"><span style="font-size: 14px;"><span style="font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">        使用call或apply继承父类的构造器中的内容，使用原型继承，继承父类的原型</span></span></div><div style="font-size: 12px;"/><div style="font-size: 12px;"><span style="font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco;">    function</span><span style="font-size: 12px;" /><span style="font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco;">Father</span><span style="font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">(</span><span style="font-size: 14px; color: rgb(181, 138, 0); font-family: Monaco;">skill</span><span style="font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">,</span><span style="font-size: 14px; color: rgb(181, 138, 0); font-family: Monaco;">id</span><span style="font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco;">){</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">        this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.skill</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">skill;</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">        this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.id</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">id;</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    Father.prototype.</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco; font-style: normal; font-weight: normal;">show</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(){</span></div><div style="font-size: 12px;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        alert(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-weight: normal;">"我是father,这是我的技能"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">+</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.skill);</span></font></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    }</span></div><div style="font-size: 12px;"><br/></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">    function</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco; font-style: normal; font-weight: normal;">Son</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(){</span></div><div style="font-size: 12px;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        Father.apply(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(74, 138, 1); font-family: Monaco; font-style: normal; font-weight: normal;">arguments</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">);</span></font></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(165, 178, 185); font-family: Monaco; font-style: normal; font-weight: normal;">    //如果不做Son的原型继承Father的原型，此时会报错：son.show is not a function</span></div><div style="font-size: 12px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-style: normal; font-weight: bold;">for</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-style: normal; font-weight: bold;">(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-style: normal; font-weight: bold;">var</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-style: normal; font-weight: bold;">i</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-style: normal; font-weight: bold;">in</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-style: normal; font-weight: bold;">Father.prototype){</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-weight: bold;">        Son.prototype[i]</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-weight: bold;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-weight: bold;">Father.prototype[i];</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco; font-weight: bold;">    }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(165, 178, 185); font-family: Monaco; font-style: normal; font-weight: normal;">    //因为，如果</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(165, 178, 185); font-family: Monaco; font-style: normal; font-weight: normal;">不让Son的原型等于Father的原型，Son使用apply是继承不到原型上的方法</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    Son.prototype.</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(228, 139, 0); font-family: Monaco; font-style: normal; font-weight: normal;">show</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">=</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">function</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">(){</span></div><div style="font-size: 12px;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">        alert(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-weight: normal;">"我是son,这是我的技能"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">+</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">this</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">.skill);</span></font></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    }</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">    var</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">f</span><span style="font-size: 12px;"> </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">= new</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">Father(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-weight: normal;">"专家级铁匠"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-weight: normal;">"father"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">);</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 99, 204); font-family: Monaco; font-style: normal; font-weight: normal;">    var</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">s</span><span style="font-size: 12px;"> </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(105, 137, 6); font-family: Monaco; font-style: normal; font-weight: normal;">= new</span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">Son(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-weight: normal;">"熟练级铁匠"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(40, 156, 151); font-family: Monaco; font-style: normal; font-weight: normal;">"son"</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">);</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    f.show();</span></div><div style="font-size: 12px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(6, 6, 6); font-family: Monaco; font-style: normal; font-weight: normal;">    s.show();</span></div><div style="font-size: 12px;"><br/></div></div><div><br/></div><div><span style="font-size: 18px; font-family: &quot;Helvetica Neue&quot;;">6.ES6  class 继承</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    class Father{</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">constructor(){</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        }</span></font></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        s</span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">how(){</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">        }</span></span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    }</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">class Son extends Father{</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">constructor(){</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">            </span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">super()</span></span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">}</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">    s</span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace;">how</span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">(){</span></span></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">           </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">}</span></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">         </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco; color: rgb(51, 51, 51);">}</span></font></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px; color: rgb(51, 51, 51); font-family: &quot;Helvetica Neue&quot;;">7.原型对象相关概念解析：</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><font style="font-size: 14px;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;; font-weight: bold;">1.对象中的</span><span style="font-size: 14px; color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;; font-weight: bold;">__proto__</span><span style="font-size: 14px; font-family: &quot;Courier New&quot;; font-weight: bold;">是什么：</span></font></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    js中万物皆对象，每个数据都会有一个</span><span style="font-size: 14px; color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;; font-weight: bold;">__proto__</span><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">的属性，这个属性叫隐式原型，</span><span style="font-size: 14px; background-color: rgb(247, 247, 247); orphans: 2; widows: 2; font-family: &quot;Courier New&quot;; font-variant-ligatures: normal;">一个对象(obj)的隐式原型(</span><span style="font-size: 14px; background-color: rgb(247, 247, 247); color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;; font-variant-ligatures: normal; font-weight: bold;">__proto__</span><span style="font-size: 14px; background-color: rgb(247, 247, 247); orphans: 2; widows: 2; font-family: &quot;Courier New&quot;; font-variant-ligatures: normal;">)指向构造该对象(obj)的构造函数(object())的原型属性(object.prototype)，这样做的原因是为了能够保证</span><span style="background-color: rgb(247, 247, 247); font-size: 14px; font-family: &quot;Courier New&quot;; font-variant-ligatures: normal;">实例(obj)能够访问到在构造函数(object())的原型属性(object.prototype)中定义的属性和方法。</span></div><div><br/></div><div><font style="font-size: 14px;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;; font-weight: bold;">2.函数中的</span><span style="font-size: 14px; color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;; font-weight: bold;">prototype</span><span style="font-size: 14px; font-family: &quot;Courier New&quot;; font-weight: bold;">是什么：</span></font></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    函数(Function)是一个特殊的对象，除了和其他对象一样有上述__proto__属性之外，还有自己特有的属性——原型（</span><span style="font-size: 14px; color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;; font-weight: bold;">prototype</span><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">），这个属性被描述成指针，他指向一个对象类型的数据，这个对象的用途就是</span><span style="font-size: 14px; color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;;">包含所有将来使用该函数构造出来的可被共享的属性和方法</span><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">（我们把这个对象叫做原型对象）。</span></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    </span><span style="font-size: 14px; color: rgb(128, 128, 128); font-family: &quot;Courier New&quot;;">原型对象内也有一个属性，叫做constructor，这个属性包含了一个指针，指回原函数（类似于arguments.callee。但是arguments只能在函数内部获得，而函数原型对象内的constructor属性，可以在任何能访问到这个函数的位置使用）。</span></div><div><br/></div><div><font style="font-size: 14px;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;; font-weight: bold;">3.构造函数，原型，实例之间的关系：</span></font></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    1&gt;构造函数Fn身上有属性prototype为原型对象，原型对象内有constructor属性指向当前prototype所在的构造函数Fn</span></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    2&gt;在new执行构造函数Fn时，创造了一个实例对象f，实例对象f的__proto__指向构造函数Fn的原型prototype</span></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    3&gt;因为实例对象f的__proto__指向构造函数Fn的原型prototype，所以实例对象f可以间接访问到Fn原型prototype的方法</span></div><div style="text-align: center;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;;"><img src="DAY27%EF%BC%9A%E9%97%AD%E5%8C%85%E5%92%8C%E7%BB%A7%E6%89%BF.resources/640.png" height="230" width="392"/><br/></span></div><div style="text-align: left;"/><div style="text-align: left;"><font style="font-size: 14px;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;; font-weight: bold;">4.查看实例对象f是否有指针指向构造函数Fn的原型：</span></font></div><div style="text-align: left;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;;">    <span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;; font-weight: bold;">isPrototypeOf()</span></span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">用于检测两个对象之间似乎否存在这种关系，使用方法如下：</span></span></font></div><div style="text-align: left;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">        Fn.prototype.isPrototypeOf(f)    // 查看 </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">Fn 的 </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">prototype 对象，是否是 f 原型</span></font></div><div style="text-align: left;"/><div style="text-align: left;"/><div style="text-align: left;"><span style="background-color: rgb(251, 250, 248);"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">    类似的还有</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;; color: rgb(255, 38, 0); font-weight: bold;">instanceof</span>运算符，使用方法如下：</span></font></span></div><div style="text-align: left;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">        console.log(f instanceof Fn)     </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">// 查看 </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">f </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">对象</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">是否是</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">构造函数 </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">Fn </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">的实例</span></div><div style="text-align: left;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">        console.log(f instanceof Object)</span></div><div style="text-align: left;"/><div style="text-align: left;"/><div style="text-align: left;"><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">    两种使用，</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">如果是返回ture，如果不是返回false</span></font></div><div style="text-align: left;"/><div style="text-align: left;"/><div style="text-align: left;"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: &quot;Courier New&quot;;">注意：instanceof运算符右侧为构造函数，并且</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;;">js中所有原型都来自Object构造函数</span></span></span></div><div style="text-align: left;"/><div><br/></div><div><br/></div><div><font style="font-size: 14px;"><span style="font-size: 14px; font-family: &quot;Courier New&quot;; font-weight: bold;">5.javascript解析器访问属性顺序:</span></font></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    当访问实例 f 的属性或方法时，会先在当前实例对象 f 中查找，如果没有，则沿着__proto__继续向上寻找，如果找到最顶头的Object还是找不到，则会抛出undefined。如果在实例中找到，或某层原型中找到，就会读取当前值并执行，同时停止向上找寻。</span></div><div><br/></div><div><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">    由此可见，解析器的解析顺序遵循</span><span style="font-size: 14px; color: rgb(255, 38, 0); font-family: &quot;Courier New&quot;;">就近原则</span><span style="font-size: 14px; font-family: &quot;Courier New&quot;;">，如果在最近的位置发现属性存在，便不会继续向上找寻。</span></div><div><span style="font-size: 14px;"><br/></span></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">扩展：call/apply的使用方法</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);"><div><a style="font-size: 12px; font-family: Monaco; text-decoration: underline;" href="https://blog.csdn.net/weixin_41636483/article/details/115082538?spm=1001.2014.3001.5501">https://blog.csdn.net/weixin_41636483/article/details/115082538?spm=1001.2014.3001.5501</a></div><div><font face="Monaco" style="font-size: 12px;"><br/></font></div><div><a href="https://blog.csdn.net/weixin_41636483/article/details/115082774?spm=1001.2014.3001.5501" style="font-size: 12px; font-family: Monaco;">https://blog.csdn.net/weixin_41636483/article/details/115082774?spm=1001.2014.3001.5501</a></div><div><font face="Monaco" style="font-size: 12px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-size: 12px; color: rgb(255, 122, 116); font-family: Monaco;">注意：知道怎么用就可以了！！！知道怎么用就可以了！！！知道怎么用就可以了！！！</span></span></div><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51);"/></div></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">掌握继承的原理</span></div><div><br/></div><div><br/></div></body></html>